<template>
    <div class="photoInfo-container">
        <h1>{{photoInfo.title}} </h1>
        <p class="subtitle">
           <span>发表时间: {{photoInfo.add_time}}</span> 
           <span>点击次数: {{photoInfo.click}}</span>
        </p>
        <hr>
        <!-- 一个缩略图区域 -->
        <!-- <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">  
          -->
        <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
        <!-- 图片内容区域 -->
        <div class="content" v-html="photoInfo.content">

        </div>
        <!-- 放置现成的评论子组件 -->
        <cmtbox :id="id"></cmtbox>
    </div>
</template>


<script>
// 1、导入评论子组件
import comment from '../subcom/comment.vue'

export default {
    data(){
        return {
            id:this.$route.params.id,//从路由中获取到的图片id
            photoInfo:{ 
            } ,
            // 缩略图的数组
        slide1: [
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 300,
            h: 200
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            alt: 'picture2',
            title: 'Image Caption 2',
            w: 1200,
            h: 900
          }
        ]
        }
    },
    created(){
        // this.getPhotoInfo()
        this.getPhotoInfo1();
        //  getThmbs()
    },
    methods:{
        getPhotoInfo(){
        // 获取图片详情
        this.$http.get('url/'+this.id).then(res=>{
            if(res.body.status==0){
                this.photoInfo=res.body.message[0];
            }
        })
    },
    getPhotoInfo1(){
        var infoList=[{
            title:'壮阔山河，一路改革',
            add_time:'2018-12-17 09:31:38',
            click:3,
            content:'&lt;div&gt;&lt;p class&#x3D;&quot;ql-align-justify&quot;&gt;&lt;strong&gt;一&lt;/strong&gt;&lt;/p&gt;&lt;p class&#x3D;&quot;ql-align-justify&quot;&gt;马里亚纳海沟暗藏于亚洲东部太平洋底，一道全长2550千米的弧，最深处超过1.1万米。人类——或者人造设备——抵达这里的次数屈指可数。高压、漆黑和冰冷的一个世界深藏其间，罕放40周年之际再来这里，就是要向世界宣示中国改革不停顿、开放不止步，中国一定会有让世界刮目相看的新的更大奇迹。&lt;/strong&gt;”&lt;uot;&gt;&lt;strong&gt;二&lt;/strong&gt;&lt;/p&gt;&lt;p class&#x3D;&quot;ql-align-justify&quot;&gt;32岁那年，习近平到任厦门。此前的1984年，邓小平给厦门题词“把经济特区办得更快些更好些”，改革春风吹过，其他经济特区却早跑了起来。&lt;/p&gt;&lt;p class&#x3D;&quot;ql-align-justify&quot;&gt;“倍感时间紧迫啊！”33年后，习近平站在国家博物馆，看着邓小平当年的题词，对一切记忆如昨。&lt;/p&gt;&lt;p class&#x3D;&quot;ql-align-justify&quot;&gt;1984年，中央决定开放沿海14个城市，厦门位列其中。这位年轻的副市长亲身参与了改革历程。他记得，“当时的厦门基本上没有什么高楼大厦大数据，建成了全国第一个大数据交易所，有企业计划集中1000名顶尖医生在网上提供高端健康服务……他转身对当地干部说：“我听懂了，贵州发展大数据确实有道理。”&lt;/p&gt;&lt;p class&#x3D;&quot;ql-align-justify&quot;&gt;2018年，贵州召开中国国际大数据产业博览会时，习近平特地发去贺信。壮阔山河，一路改革&quot; inline&#x3D;&quot;0&quot;&gt;&lt;p class&#x3D;&quot;pgc-img-caption&quot;&gt;2015年6月17日，习近平来到贵阳市大数据广场，走进大数据应用展示中心，听取贵州大数据产业发展、规&lt;/p&gt;&lt;/div&gt;&lt;p class&#x3D;&quot;ql-align-justify&quot;&gt;&lt;br&gt;&lt;/p&gt;&lt;p class&#x3D;&quot;ql-align-justify&quot;&gt;&lt;strong&gt;三&lt;/strong&gt;&lt;/p&gt;&lt;p class&#x3D;&quot;ql-align-justify&quot;&gt;湖南，湘西十八洞村。&lt;/p&gt;&lt;p class&#x3D;&quot;ql-align-justify&quot;&gt;2018年夏，本扬沿着石板路走进了村子，穿过邮局、农家乐、自助取款机和一间书屋，到了石爬专老人家中。这位老挝人民革命党中央总书记、国家主席，此行是沿着习近平走过的路考察。&lt;/p&gt;&lt;p class&#x3D;&quot;ql-align-justify&quot;&gt;习近平来十八洞村，是五年前的事情了。人民日报记录下了他同石爬专老人的对话——&lt;/p&gt;&lt;p class&#x3D;&quot;ql-align-justify&quot;&gt;“ 该怎么称呼你？”石爬专老人问。&lt;/p&gt;&lt;p class&#x3D;&quot;ql-align-justify&quot;&gt;“这是总书记。”村委会主任介绍。&lt;/p&gt;&lt;p class&#x3D;&quot;ql-align-justify&quot;&gt;习近平总书记握住老人的手询问年纪，t;'
            },
           {
            title:'浙江一对情侣吵架，女友突然下车横卧在高速路中间！接下来更是意想不到',
            add_time:'2018-12-16 21:39:13',
            click:3,
            content: '情侣之间撒撒娇，偶尔小作一下，可能会是一种乐趣，但如果要是连命也豁出去了，那就真当是作死的节奏！１２月１５日２０点２８分左右，一辆红色小轿车在甬舟高速舟山跨海大桥主车道上毫无症状的停了下来，紧接着的这波“表演”真是让人捏了一把汗。大约过了几分钟，车上的一名女子突然推开驾驶座的门，怒气冲冲的下来猛拉了几下后车门，见拉不开后，女子二话不说直接横躺在了高速公路上，并且占据了二个车道，随后她又起身隔着车窗玻璃和男子继续争执，“演出”还在继续，突然一转身，她又重新蹲在了左侧车道上，想进一步引起男子的注意。此刻男子也从另一侧的车门出来了，但没有上前安抚女子，而是直接走出高速公路硬路肩外的护栏方便去了，这两位的心也是够大的。'
            },
            {
            title:'徐锦江回应撞脸海王：我们很像但他身材更好',
            add_time:'2018-12-16 16:14:02',
            click:3,
            content:  '&lt;p&gt;新京报讯 （记者 周慧晓婉）12月16日，由温子仁执导的DC超级英雄大片《海王》累计票房已经突破12亿，《海王》的热映也让演员徐锦江不断登上热搜，因为不少观众发现徐锦江和海王的演员杰森·莫玛长得有点像，甚至把徐锦江的脸P在海王的身上，也毫无违和感。&lt;/p&gt;&lt;p&gt;关于这些讨论，徐锦江独家向新京报记者分享了自己的体会，“我想是观众对我的影视形象印象深刻，真的很感谢观众对我的喜爱。莫玛是一位很优秀的演员。以前他是骁勇善战的马王，现在他是海王了，海洋是相通的，欢迎他到中国来开拓他的演艺事业。”说完他笑着表示，“其实他不必担心与我撞脸的事情，虽然我们确实很像，但他有更棒的身材，希望将来我们可以在电影和环保事业上有所合作。”&lt;/p&gt;&lt;img src&#x3D;&quot;http://p99.pstatp.com/large/pgc-image/RCNYW5j7KrlgCj&quot; img_width&#x3D;&quot;690&quot; img_height&#x3D;&quot;820&quot; alt&#x3D;&quot;徐锦江回应撞脸海王：我们很像但他身材更好&quot; inline&#x3D;&quot;0&quot;&gt;&lt;img src&#x3D;&quot;http://p1.pstatp.com/large/pgc-image/RCNYW68ABOa7wj&quot; img_width&#x3D;&quot;690&quot; img_height&#x3D;&quot;595&quot; alt&#x3D;&quot;徐锦江回应撞脸海王：我们很像但他身材更好&quot; inline&#x3D;&quot;0&quot;&gt;&lt;p&gt;网友P图，徐锦江撞脸海王和雷神。图源网络&lt;/p&gt;&lt;p&gt;其实早在去年《正义联盟》上映时，徐锦江便曾与电影院门外的海王模型合影，还留言：“假作真时真亦假”，似乎一早知道自己与莫玛长得很像。前些日子莫玛来华宣传采访，有媒体让莫玛看徐锦江的照片，称两人长得很像，他随即笑着表示认可，“真的吗？我有一个在中国的分身？”莫玛提到，“他确实有点像我，很像的，我很想见见他”，之后还叫助理找徐锦江的资料给他看。&lt;/p&gt;&lt;img src&#x3D;&quot;http://p99.pstatp.com/large/pgc-image/RBdZO4DIwPngaa&quot; img_width&#x3D;&quot;630&quot; img_height&#x3D;&quot;958&quot; alt&#x3D;&quot;徐锦江回应撞脸海王：我们很像但他身材更好&quot; inline&#x3D;&quot;0&quot;&gt;&lt;p&gt;&lt;strong&gt;新京报：&lt;/strong&gt;你有看到自己因为海王再次登上热搜吗？&lt;/p&gt;&lt;p&gt;&lt;strong&gt;徐锦江：&lt;/strong&gt;热搜是朋友发给我看的，很有意思，我也想不到竟然又是因为撞脸挂上热搜，还蛮好玩的。&lt;/p&gt;&lt;p&gt;&lt;strong&gt;新京报：&lt;/strong&gt;都说你制霸海陆空，在漫威和DC之间游刃有余（徐锦江也被网友认为和雷神扮演者克里斯·海姆斯沃斯长得像），自己经常看这些电影吗？&lt;/p&gt;&lt;p&gt;&lt;strong&gt;徐锦江：&lt;/strong&gt;我当然会看，不过现在我觉得网友们都非常有才华，能把我们联想到一起还做成了图片，太神奇了。&lt;/p&gt;&lt;p&gt;&lt;strong&gt;新京报：&lt;/strong&gt;今后会参演属于自己的超级英雄电影吗？会不会想和雷神、海王见一面？&lt;/p&gt;&lt;p&gt;&lt;strong&gt;徐锦江：&lt;/strong&gt;很希望我们中国能有自己的超级英雄电影，就我来说也有想和他们见面，不知道我们三个人在一起会不会现场撞脸，让人都分不出来谁是谁。&lt;/p&gt;&lt;img src&#x3D;&quot;http://p3.pstatp.com/large/pgc-image/RCNYW6SDprcRAf&quot; img_width&#x3D;&quot;541&quot; img_height&#x3D;&quot;614&quot; alt&#x3D;&quot;徐锦江回应撞脸海王：我们很像但他身材更好&quot; inline&#x3D;&quot;0&quot;&gt;&lt;p&gt;新京报记者 周慧晓婉 编辑 吴奇函 校对 王心&lt;/p&gt;'
            }
            ];
            console.log(this.id);
            this.photoInfo=infoList[this.id-1];
    },
    getThmbs(){
        // 获取缩略图
        this.$http.get('url'+this.id).then(res=>{
            if(res.body.status==0){
                // 循环每个图片数据，补全宽和高，把完整数据保存到list中
                res.body.message.array.forEach(element => {
                    element.w=600
                    element.h=400
                });
            }
            this.list=res.body.message
        })
    },
    handleClose(){
        console.log('close event');
    }
    },
    // 2、注册
    components:{
        'cmtbox':comment
    }
   

}
</script>

<style lang="less" scoped>
.photoInfo-container{
    padding: 5px;
    h1{
        text-align: center;
        font-size: 14px;
    }
    .subtitle{
        display: flex;
        justify-content: space-between;
    }
    .content{
        font-size: 13px;
        line-height: 30px;
        text-indent: 2em;
    }
}
</style>


